{% extends 'layout/manage.html' %}
{% block title %}{% endblock %}

{% block css %}
    <style>
        .list-group .choices {
            border-left: 2px solid #f90 !important;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container clearfix" style="margin-top: 20px">

        <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-heading" style="background-color: transparent;font-weight: bold">
                    用户设置
                </div>
                <div class="list-group" style="border-radius: 0">
                    <div>
                        <a href="{% url 'profile' %}" class="list-group-item choices">我的资料</a>
                        {#                        <a href="#" class="list-group-item">修改密码</a>#}
                        {#                        <a href="{% url 'setting_delete' project_id=request.web.project.id %}" class="list-group-item">删除项目</a>#}
                    </div>
                </div>
            </div>
        </div>


        <div class="col-sm-9">
            <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                <i class="layui-icon layui-icon-upload"></i> 系统头像设置
            </button>
            <div style="width: 145px;">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 145px;">
                    <div id="ID-upload-demo-text"></div>
                </div>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-address-card-o" aria-hidden="true"></i>
                    我的资料
                </div>
                <div class="panel-body">
                    <div class="col-md-12">

                        <form action="{% url 'profile' %}" class="form-horizontal" method="post">
                            {% csrf_token %}
                            <div class="form-group">
                                <label class="col-sm-4 control-label">登录账户</label>
                                <div class="col-sm-5">
                                    <input disabled type="text" class="form-control" placeholder="请输入昵称"
                                           name="username" value="{{ request.web.user.username }}">
                                    <span class="error-msg">{{ error }}</span>
                                </div>
                                <label class="col-sm-4 control-label">用户昵称</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" placeholder="



                                            {% if nick_name %}{{ nick_name }}{% elif request.web.user.nick_name %}{{ request.web.user.nick_name }}{% else %}请输入昵称{% endif %}"
                                           name="nick_name">
                                    <span class="error-msg">{{ error }}</span>
                                </div>
                                <label class="col-sm-4 control-label">密码</label>
                                <div class="col-sm-5">
                                    <input type="password" class="form-control" placeholder="***********"
                                           name="password">
                                    <span class="error-msg">{{ error }}</span>
                                    {% if password_flag %} <span class="success">密码已更新</span>{% endif %}
                                </div>

                            </div>

                            <div class="form-group">
                                <div class="col-sm-offset-5 col-sm-5">
                                    <input type="submit" class="btn btn-info" value="更 新">
                                </div>
                            </div>
                        </form>

                        {% if request.web.user.git_username %}
                            <label class="col-md-12">
                                已绑定Git:<img src="{{ request.web.user.git_avatar }}"
                                               style="height: 30px;"/> {{ request.web.user.git_username }}</label>

                        {% endif %}
                        <form action="{% url 'profile_git' %}" class="form-horizontal" method="post">
                            {% csrf_token %}
                            <div class="form-group">
                                <label class="col-sm-4 control-label">Git账户名称</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" placeholder="



                                            {% if request.web.user.git_username %}{{ request.web.user.git_username }}{% else %}请输入Git账户名称用于绑定Git{% endif %}"
                                           name="git_username">
                                    <span class="error-msg">{{ error }}</span>
                                </div>
                                <label class="col-sm-4 control-label">Git账户密码</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control"
                                           placeholder="{% if request.web.user.git_username %}***********{% else %}请输入Git账户密码用于绑定Git{% endif %}"
                                           name="git_password">
                                    <span class="error-msg">{{ error }}</span>
                                </div>
                            </div>


                            <div class="form-group">
                                <div class="col-sm-offset-5 col-sm-5">
                                    {% if request.web.user.git_username %}
                                        <input type="submit" class="btn btn-info" value="重 新 绑 定">
                                    {% else %}
                                        <input type="submit" class="btn btn-info" value="绑 定">
                                    {% endif %}

                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>

        </div>

    </div>

{% endblock %}

{% block js %}
    <script>
        layui.use(function () {
            var upload = layui.upload;
            var layer = layui.layer;
            var element = layui.element;
            var $ = layui.$;
            // 单图片上传
            var uploadInst = upload.render({
                elem: '#ID-upload-demo-btn',
                url: '{% url 'profileupload' %}', // 实际使用时改成您自己的上传接口即可。
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    });
                    element.progress('filter-demo', '0%'); // 进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                },
                done: function (res) {
                    console.log('done res ',res)
                    // 若上传失败
                    if (res.status === 0) {
                        return layer.msg('上传失败');
                    }else{
                          $('#ID-upload-demo-img').attr('src', res.results.file_url);
                    }
                    // 上传成功的一些操作
                    // …
                    $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                },
                error: function () {
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function (n, elem, e) {
                    element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
        });

        $('#ID-upload-demo-img').attr('src','{{ request.web.user.sys_avatar}}');

    </script>
{% endblock %}